<template>
	<view class="container">
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{item}}</text>
			</view>
		</scroll-view>
		<swiper class="tab-content" :current="currentTab" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
			<swiper-item v-for="(commenList,index) in CommenData" :key="index" scroll-with-animation>
				<scroll-view scroll-y class="scoll-y" @scrolltolower="bottomMore">
					<block v-for="(commenItem,commenIndex) in commenList" :key="commenIndex">
						<view class="list-view">
							<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail(commenItem.commentId,commenItem.userId)">
								<view class="cu-list menu-avatar user-title">
									<view class="flex justify-start">
										<view class="cu-avatar round sm" :style="'background-image:url('+commenItem.userUrl+');'"></view>
										<view class="text-grey margin-left-sm">{{commenItem.commentTitle}}</view>
										<view class="margin-left-sm " style="align-self: center;">
											<tui-rate :current="commenItem.commentScore" :quantity="5" :size="13" active="#FFB712" :hollow="true"></tui-rate>
										</view>
									</view>
								</view>
								<view class="text-df text-bold margin-tb-xs">{{commenItem.commentCom}}</view>
								<view class="img-container">
									<view class="cell-img" v-for="(imgurL,index) in commenItem.commentImgList" :key="imgurL">
										<image :src='imgurL' class="img" mode="aspectFill" v-if="index<3"></image>
									</view>
								</view>
								<view class="text-gray text-sm flex justify-between margin-top-sm">
									<view></view>
									<view class="text-gray text-sm">
										<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{commenItem.commentPraise}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbar: ["热门", "最新", "好友", "个人"],
				winHeight: "",
				currentTab: 0,
				pages: [1, 1, 1, 1],
				limit: [6, 6, 6, 6],
				scrollLeft: 0,
				CommenData: [
					[],
					[],
					[],
					[]
				]
			}
		},
		props: {
			movieId: {
				type: Number,
				default: 0
			}
		},
		created: function(e) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let calc = res.windowHeight;
					that.winHeight = calc;
				}
			});
			this.getFollowCommmentById()
			this.getHotCommentById()
			this.getNewCommentById()
			this.getUserCommentById()
		},
		methods: {
			// 滚动切换标签样式
			switchTab: function(e) {
				let that = this;
				this.currentTab = e.detail.current;
				this.checkCor();
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
			},
			checkCor: function() {
				if (this.currentTab > 3) {
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			bottomMore() {
				this.isRequest().then(() => {
					this.$forceUpdate();
				})
			},
			detail(index, userId) {
				this.$common.navigateTo('/pages/contentInfo/contentInfo?commentId=' + index + '&userId=' + userId)
			},
			isRequest() {
				return new Promise((resolve, reject) => {
					this.pages[this.currentTab]++
					var that = this
					switch (this.currentTab) {
						case 0:
							break;
						case 1:
							this.$api.getNewCommentById({
								page: that.pages[that.currentTab],
								limit: this.limit[that.currentTab],
								movieId: this.movieId
							}, (res) => {
								if (res.code) {
									this.CommenData[this.currentTab] = [...this.CommenData[this.currentTab], ...res.comment];
									resolve()
								}
							})
							break;
						case 2:
							this.$api.getFollowCommmentById({
								page: that.pages[that.currentTab],
								limit: this.limit[that.currentTab],
								movieId: this.movieId
							}, (res) => {
								if (res.code) {
									this.CommenData[this.currentTab] = [...this.CommenData[this.currentTab], ...res.comment];
									resolve()
								}
							})
							break;
						default:
							break;
					}
				})
			},
			getHotCommentById() {
				this.$api.getHotCommentById({
					movieId: this.movieId
				}, (res) => {
					if (res.code) {
						this.CommenData[0] = res.comment;
						this.$forceUpdate();
					}
				})
			},
			getNewCommentById() {
				this.$api.getNewCommentById({
					movieId: this.movieId,
					page: this.pages[1],
					limit: this.limit[1]
				}, (res) => {
					if (res.code) {
						this.CommenData[1] = res.comment
					}
				})
			},
			getFollowCommmentById() {
				this.$api.getFollowCommmentById({
					movieId: this.movieId,
					page: this.pages[2],
					limit: this.limit[2]
				}, (res) => {
					if (res.code) {
						this.CommenData[2] = res.comment
					}
				})
			},
			getUserCommentById() {
				this.$api.getUserCommentById({
					movieId: this.movieId
				}, res => {
					if (res.code) {
						this.CommenData[3] = res.comment;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tab-view {
		width: 100%;
		height: 100upx;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
		white-space: nowrap;
	}

	.tab-bar-item {
		padding: 0;
		height: 100upx;
		min-width: 80upx;
		line-height: 100upx;
		margin: 0 28upx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}

	.tab-bar-title {
		height: 100upx;
		line-height: 100upx;
		font-size: 32upx;
		color: #999;
		font-weight: 400;
	}

	.active {
		border-bottom: 6upx solid #42BD56;

	}

	.active .tab-bar-title {
		color: #42BD56 !important;
		font-size: 36upx;
		font-weight: bold;
	}

	.scoll-y {
		height: 100%;
	}

	.list-view {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list-cell {
		padding: 30upx;
		box-sizing: border-box;
	}

	.cell-title-box {
		display: flex;
		justify-content: space-between;
	}

	.cell-title {
		font-size: 36upx;
		line-height: 56upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.img-container {
		width: 100%;
		padding-top: 24upx;
		display: flex;

		.cell-img {
			margin: 0upx 10upx;
		}

		// justify-content: space-between;

	}

	.cell-img {
		width: 32%;
		overflow: hidden;
		position: relative;
	}

	.img {
		width: 200upx;
		height: 200upx;
		display: block;
		border-radius: 4upx;
	}

	.sub-title {
		padding-top: 24upx;
		font-size: 28upx;
		color: #BCBCBC;
		display: flex;
		align-items: center
	}

	.badge {
		padding: 5upx 10upx;
		font-size: 24upx;
		border-radius: 4upx;
		margin-right: 20upx;
	}

	.b-red {
		background: #FCEBEF;
		color: #8A5966;
	}

	.b-blue {
		background: #ECF6FD;
		color: #4DABEB;
	}

	.b-orange {
		background: #FEF5EB;
		color: #FAA851
	}

	.b-green {
		background: #E8F6E8;
		color: #44CF85
	}

	.ser-title {
		margin-top: 20upx;
	}
</style>
